<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header id="header">
    <a href="user_order.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">我的订单</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <div class="user-order-detail-info">
        <div class="arrow-right">
            <p>查看约拍信息</p>
            <p><span>小娜</span><span>摄影师（上海）</span><span class="fc-ff3995">希望互免</span></p>
        </div>
    </div>
    <div class="user-order-detail-status">
        <p>已提交</p>
        <p>TA提交了约拍请求，请联系TA处理</p>
    </div>
    <div class="user-order-list">
        <div class="user-order-db mutually">
            <ul>
                <li class="clearfix">
                    <div class="fl portrait">
                        <img src="../images/user_mini.png" alt="">
                    </div>
                    <div class="fl information">
                        <h5>睡不醒的木鱼（上海奉贤）
                            <img src="../skin/xhdpi/sex_w.png" alt="">
                            <img src="../skin/xhdpi/sex_m.png" alt="">
                            <img src="../skin/xhdpi/phone_m.png" alt="">
                            <img src="../skin/xhdpi/authentication.png" alt="">
                        </h5>
                        <p>
                            <span>90后</span>
                            <span>双鱼座</span>
                            <span class="fc-ff3995">希望互免</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                    <p class="comment">
                        <span>还没有评分</span>
                        <span>0人评论</span>
                        <a href="">查看评价内容</a>
                    </p>
                    <p class="phone">13856786789</p>
                    <p class="time">2018年3月20日 15:30</p>
                    <div class="contact clearfix">
                        <a class="fr" href="">联系客服</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="user-order-detail-comment">
        <div class="clearfix">
            <a class="fl" href="">点击这里查看TA的联系方式↑</a>
            <a class="fr" href="">回复一下</a>
        </div>
        <p>您可以对约拍过程中对方的表现进行评价，您的评价对于我们很重要！</p>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li>
            <a class="camera" href="../ranking/index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li class="active">
            <a class="person" href="user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    function tabs(name) {
        $(".user-order-db").removeClass('user-order-db');
        $(".now").removeClass('now');
        $("#" + name).toggleClass('now');
        if (name === 'all') {
            $(".user-order-list>div").toggleClass('user-order-db');
        } else {
            $("." + name).toggleClass('user-order-db');
        }
    }

    $(function () {
        var $vocation = $('#vocation_li');
        $vocation.on('click', function () {
            $(".vocation").toggleClass('dialog-show');
        });

        var $close = $(".close");
        $close.on('click', function () {
            $(".dialog").removeClass('dialog-show');
        });

        var $region = $('#region_li');
        $region.on('click', function () {
            $(".region").toggleClass('dialog-show');
        });
        $(":radio").click(function () {
            $("#vocation_val").val($(this).val());
            $(".dialog").removeClass('dialog-show');
        });

    })
</script>
</body>
</html>
